<style lang="scss" scoped>
.forget {
  width: 100%;
  height: 100vh;
  background: url('../../bl-img/login_bg.png') no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .forget-item {
    width: 300px;
    background-color: #fff;
    padding: 10px 20px;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 10px;
  }
}
</style>

<template>
  <div class="forget">
    <van-nav-bar title="设置新密码" left-arrow @click-left="router.back()"> </van-nav-bar>
    <div class="forget-item">
      <van-field
        v-model="pwd1"
        :type="pwd1Type"
        placeholder="请设置新密码"
        :rules="[{ required: true, message: '请输入密码' }]"
      >
        <template v-slot:right-icon>
          <span class="solts" @click="password1Type">
            <van-icon name="eye" v-if="pwd1Type === 'password'" />
            <van-icon name="closed-eye" v-else />
          </span>
        </template>
      </van-field>
      <van-field
        v-model="pwd2"
        :type="pwd2Type"
        placeholder="请再次确认新密码"
        :rules="[{ required: true, message: '请输入密码' }]"
      >
        <template v-slot:right-icon>
          <span class="solts" @click="password2Type">
            <van-icon name="eye" v-if="pwd2Type === 'password'" />
            <van-icon name="closed-eye" v-else />
          </span>
        </template>
      </van-field>
    </div>
    <el-button
      type="primary"
      @click="complete"
      round
      style="width: 300px; margin: 0 auto; margin-bottom: 40px"
      size="large"
      >完成</el-button
    >
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { request } from '../../axios/request'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { JSEncrypt } from 'jsencrypt'
import { getForget } from '../../stores/forget'

// 跳转路由
const router = useRouter()

// 获取数据
const setForget = getForget()

// 绑定表单
const pwd1 = ref('')
const pwd2 = ref('')

// 密码类型
const pwd1Type:any = ref('password')
const pwd2Type:any = ref('password')
const password1Type = () => {
  pwd1Type.value = pwd1Type.value === 'password' ? 'text' : 'password'
}
const password2Type = () => {
  pwd2Type.value = pwd2Type.value === 'password' ? 'text' : 'password'
}

// 下一步
const complete = async () => {
  const crypt = new JSEncrypt()
  const publicKey =
    'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCuQd3gESx7VdIyRYUWjmjg61VIgUK6F45hClmqUMZ7xNiT5rlLM6e78osMvBF/yP7cVm7pK+NMCDWoVS1/AETpxJYqUlIC77ZAU8/MnP96IupnJL87vqhPcpdv7+VqLM38ls++yuD/F/HSoOQTv/leJh+dgE/4EYAJjOWFAbYfXwIDAQAB'
  crypt.setPublicKey(publicKey)
  const newPwd1 = ref(crypt.encrypt(pwd1.value))
  await request
    .put(
      '/api/health/user/v1/resetUserPwd',
      {
        email: setForget.email,
        pwd1: newPwd1.value,
        pwd2: newPwd1.value
      },
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )
    .then((res) => {
      console.log(res);
      let { message, status } = res.data
      if (status === '0000') {
        ElMessage.success(message)
        router.push('/login')
      } else {
        ElMessage.error(message)
      }
    })
}
</script>